<!--统计分析-->
<template>
<div>
	<div class="search-box">
        <el-form :inline="true" size="medium">
            <el-form-item>
                <el-date-picker
					placeholder="发布时间"
                    v-model="time"
                    type="datetime"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
	<div id="myChart"></div>
</div>
</template>

<script>
import DomSize from '@/utils/domSize'
export default {
	data() {
		return {
			time:'',
			myChart:{}
		};
	},
	created() {},
	mounted() {
		this.setChart()
		DomSize.bind(document.getElementById('myChart'), ()=>{
			this.myChart.resize()
		})
	},
	methods: {
		setChart(){
			this.myChart = this.$echarts.init(document.getElementById('myChart'));
			var option = {
				// title: {
				// 	text: title,
				// 	left: '50%',
				// 	top: '20',
				// 	textAlign: 'center'
				// },
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['孝南区', '孝昌县', '安陆市', '应城市', '云梦县', '大悟县', '汉川市'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '案件数量',
						label: {
							show: true,
							position: 'inside'
						},
						type: 'bar',
						barWidth: '60%',
						data: [96, 90, 75, 70, 85, 93, 95]
					}
				]
			};
			this.myChart.setOption(option);
		},
	},
};
</script>

<style lang="scss" scoped>
#myChart{
	width: 100%;
	min-height: 400px;
}
</style>
